<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
    html,body {width: 100%;margin: 0;padding: 0;}
    .main {width: 90%;margin: 100px auto 0; box-sizing: border-box; }
    .main div {box-sizing: border-box;box-sizing: border-box; 
}
.main div {
box-sizing: border-box;
}
.main-box {
float: left;
width: 45%;
padding: 40px 0;
border: 1px solid #999;
background-color: #F05A10;
}
.main-work {
width: 80%;
min-height: 60px;
margin: 0 auto; 
border-radius: 30px; 
background-color: #EDEDED;
}
.main-work .main-work-top {
height: 60px;
padding: 5px 3%;
} 
.main-work .main-work-top input[type="text"] {
width: 75%;
height: 50px;
margin: 0;
padding: 0;
border: 1px solid #999;
border-radius: 25px;
outline: none;
box-sizing: border-box;
background-color: #DEDEDE;
text-indent: 1em; 
font-size: 20px;}
.main-work .main-work-top button {
width: 20%;
height: 50px; 
margin: 0;
padding: 0;
background-color: #FF6600;
box-sizing: border-box;
border-radius: 25px;
font-size: 24px; 
line-height: 46px;
color: #FFF;
}
.main-work .main-work-bottom {
width: 100%;
margin: 0;
padding: 5px 5%;
border: none;
box-sizing: border-box;
list-style: none;
}
.main-work .main-work-bottom li {
width: 75%;
height: 36px; 
margin: 0;
padding: 0;
border-radius: 18px;
list-style: none;
text-indent: 1em;
font-size: 20px;
line-height: 36px;
color: #666;
cursor:pointer;
}
.main-work .main-work-bottom li:hover {
background-color: #FF6600;
color: #FFF;
}
.left {
float: left;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0; 
overflow: hidden;
visibility: hidden;
}
</style>


</head>

<body>
<div id="app">
<div class="main clearfix" >
 <div class=" main-box left">
<main-work v-bind:btn="btnOne" ></main-work>
</div>
</div>
</div> 
<template id="cccc">
<ul class="main-work-bottom" v-show="show">
<li v-for="list in lists" v-on:click="selectList(list)">{{list}}</li>
</ul>
</template>
<script>
    Vue.component('main-work', {
template:'<div class="main-work"><div class="main-work-top clearfix"><input type="text" class="left" v-model="input" v-on:focus="showSelectListFunc"><button class="right">{{btn}}</button></div><main-work-list v-on:setvalue="setvalue" v-bind:show="showSelectList"></main-work-list></div>',
props:['btn'],
data:function(){
return {
input:'',
showSelectList:false
}
},
methods: {
showSelectListFunc:function(){
this.showSelectList=true;
},
hideSelectListFunc:function() {
this.showSelectList=false;
},
setvalue:function(list,show) {
this.input=list;
this.showSelectList=!show;}}
})
Vue.component('main-work-list', {
template:'#cccc',
props: ['show'],
data: function () {
return {
lists: [
"html+CSS",
' html5+css3',
"javascript",
'angular' ,
'react',
'vue',
'iview',
]
}
},
methods: {
selectList:function(list) {
this.$emit('setvalue', list, this. show);
}
}
})

var app = new Vue( {
el:'#app',
data: {
btnOne:'查询'
}
})
</script>
</body>

</html>